import React, { Component } from 'react';
import { connect } from 'react-redux';

class String extends Component {
    state = {  } 

    ClickAddHandle = () => {
        this.props.add(10);
    }

    ClickSubHandle = () => {
        this.props.sub(1);
    }

    render() { 
        return (<React.Fragment>
            <h1>String: {this.props.string}</h1>
            <button className='btn btn-info' onClick={this.ClickAddHandle}>+</button>
            <button className='btn btn-warning' onClick={this.ClickSubHandle}>-</button>
        </React.Fragment>);
    }
}

const mapStateToProps = (state, props) => {
    return {
        string: state.string
    }
}

// 封装dispatch，可以在props中调用封装的函数
// 在String组件中修改Number组件的信息，这样就实现了不同组件的信息修改
const mapDispatchToProps = (dispatch) => {
    return {
        add: x => dispatch({type: "add", step: x}),
        sub: x => dispatch({type: "sub", step: x}),
    }
}
 
export default connect(mapStateToProps, mapDispatchToProps)(String);